<template>
  <div id="app">
    <ul class="layui-nav layui-bg-cyan">
      <!--      <li class="layui-nav-item">-->
      <!--        <button type="button" class="layui-btn layui-btn-normal"-->
      <!--                @click="$router.push({path:'/discoverMusic',query:{keyword:'发现音乐'}})">发现音乐-->
      <!--        </button>-->
      <!--      </li>-->
      <!--      <li class="layui-nav-item">-->
      <!--        <button type="button" class="layui-btn layui-btn-normal"-->
      <!--                @click="$router.push({path:'/myMusic',query:{keyword:'我的音乐'}})">我的音乐-->
      <!--        </button>-->
      <!--      </li>-->
      <!--      <li class="layui-nav-item">-->
      <!--        <button type="button" class="layui-btn layui-btn-normal"-->
      <!--                @click="$router.push({path:'/myInfo',query:{keyword:'我的'}})">我的-->
      <!--        </button>-->
      <!--      </li>-->
      <!--      <li class="layui-nav-item">-->
      <!--        <button type="button" class="layui-btn layui-btn-normal"-->
      <!--                @click="$router.push({name:'product',params:{userId:'100'}})">购物车-->
      <!--        </button>-->
      <!--      </li>-->

      <li class="layui-nav-item">
        <button type="button" class="layui-btn layui-btn-normal"
                @click="$router.replace({path:'/discoverMusic',query:{keyword:'发现音乐'}})">发现音乐
        </button>
      </li>
      <li class="layui-nav-item">
        <button type="button" class="layui-btn layui-btn-normal"
                @click="$router.replace({path:'/myMusic',query:{keyword:'我的音乐'}})">我的音乐
        </button>
      </li>
      <li class="layui-nav-item">
        <button type="button" class="layui-btn layui-btn-normal"
                @click="$router.replace({path:'/myInfo',query:{keyword:'我的'}})">我的
        </button>
      </li>
      <li class="layui-nav-item">
        <button type="button" class="layui-btn layui-btn-normal"
                @click="$router.replace({name:'product',params:{userId:'100'}})">购物车
        </button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}

button {
  margin: 0 10px;
}
</style>
<script setup>
</script>